iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
Modern Web

30天React從入門到入坑系列 第 3

DAY3:create-react-app_建立與說明

  • 分享至 

  • xImage
  •  

安裝create-react-app之前必須先裝Node.js,如果為了環境乾淨其實可以不需要使用安裝版。以window為例,可以下載Node.js zip檔解壓使用。

本環境下載zip測試
https://nodejs.org/en/download/

使用npm安裝套件前先設定環境變數指到Node.js目錄下,才不用每次安裝套件都需要切換目錄。
https://ithelp.ithome.com.tw/upload/images/20171222/20107317N1ef1DDsvX.png

使用create-react-app,下面指令分別為:

  1. 使用npm安裝create-react-app
  2. 使用create-react-app建立專案react-app
  3. 切換目錄到react-app
  4. npm start啟動server( url:http://localhost:3000/ )
npm install -g create-react-app
create-react-app react-app
cd react-app
npm start

https://ithelp.ithome.com.tw/upload/images/20171222/20107317hNPqTs5UZU.png

因為先前使用Node.js壓縮檔,安裝套件會直接裝在目錄夾下,如果測試後不用直接把整個資料夾刪掉就好。如果是安裝版本,會把所有模組安裝在%AppData%\npm\node_modules。
https://ithelp.ithome.com.tw/upload/images/20171222/20107317sH8HFh7CQ3.png

待續,明天針對專案目錄與程式碼進行說明~~


上一篇
DAY2:Virtual DOM與JSX
下一篇
DAY4:create-react-app_說明目錄結構與檔案
系列文
30天React從入門到入坑30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言